<template>
  <div v-show="isshow" class="isshow">
   <div class="content">{{message}}</div>
  </div>
</template>

<script>
export default {
  name:'toast',
  data () {
    return {
      isshow:false,
      message:''
    }
  },
  methods: {
    show(res,delay){
      this.isshow=true
      this.message=res
      setTimeout(()=>{
        this.isshow=false
        this.message=''
      },delay)
    return 1
    }
  }
}
</script>
  
<style scoped>
  .isshow{
  text-align: center;
   position: relative;
   z-index: 99;
   top: -100%;
   left: 50%;
   width: 180px;
   height: 50px;
   transform: translate(-50%,-800%);
   background-color: rgba(0,0,0, .5);
   border-radius: 10px;
   line-height: 50px;
  }
  .content{
    color: white;
  }
</style>